<template>
  <div class="example-container">
    <h2>🏗️ reactive() - 响应式对象</h2>
    
    <div class="demo-section">
      <h3>魔法背包</h3>
      <div class="backpack">
        <div class="items-list">
          <div v-for="(item, index) in backpack.items" :key="index" class="item">
            <span class="item-name">{{ item.name }}</span>
            <span class="item-count">数量: {{ item.count }}</span>
            <span class="item-value">价值: {{ item.value }} 金币</span>
          </div>
          <div v-if="backpack.items.length === 0" class="empty-message">背包空空如也！</div>
        </div>
        
        <div class="backpack-stats">
          <p>背包总价值: <span class="gold">{{ backpack.totalValue }}</span> 金币</p>
          <p>物品总数: <span class="highlight">{{ itemCount }}</span></p>
        </div>
        
        <div class="actions">
          <button @click="addGold" class="action-button">添加金币</button>
          <button @click="addPotion" class="action-button potion">添加药水</button>
          <button @click="addWeapon" class="action-button weapon">添加武器</button>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>用户信息管理</h3>
      <div class="user-info">
        <div class="info-item">
          <label>姓名:</label>
          <input v-model="user.name" type="text" placeholder="输入姓名" />
        </div>
        <div class="info-item">
          <label>年龄:</label>
          <input v-model.number="user.age" type="number" placeholder="输入年龄" />
        </div>
        <div class="info-item">
          <label>爱好:</label>
          <div class="hobbies">
            <div v-for="(hobby, index) in user.hobbies" :key="index" class="hobby">
              {{ hobby }} <button @click="removeHobby(index)" class="remove-btn">×</button>
            </div>
            <div class="add-hobby">
              <input v-model="newHobby" type="text" placeholder="新爱好" />
              <button @click="addHobby" class="add-btn">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="code-section">
      <h3>📝 代码说明</h3>
      <p><strong>reactive()</strong> 用于创建响应式对象，特别适合处理复杂的数据结构。</p>
      <p>使用 reactive 创建的对象，可以直接访问和修改其属性，不需要 <code>.value</code>。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, ref } from 'vue';

// 定义类型
interface Item {
  name: string;
  count: number;
  value: number;
}

interface Backpack {
  items: Item[];
  totalValue: number;
}

interface User {
  name: string;
  age: number;
  hobbies: string[];
}

// 创建响应式对象
const backpack = reactive<Backpack>({
  items: [
    { name: '魔法药水', count: 5, value: 10 },
    { name: '金币', count: 100, value: 1 }
  ],
  totalValue: 150
});

const user = reactive<User>({
  name: '小明',
  age: 20,
  hobbies: ['打游戏', '学Vue']
});

const newHobby = ref('');

// 计算属性
const itemCount = computed(() => {
  return backpack.items.reduce((total, item) => total + item.count, 0);
});

// 方法
const addGold = () => {
  const goldItem = backpack.items.find(item => item.name === '金币');
  if (goldItem) {
    goldItem.count += 50;
    backpack.totalValue += 50; // 更新总价值
  } else {
    // 如果没有金币，添加金币项目
    backpack.items.push({ name: '金币', count: 50, value: 1 });
    backpack.totalValue += 50;
  }
};

const addPotion = () => {
  const potionItem = backpack.items.find(item => item.name === '魔法药水');
  if (potionItem) {
    potionItem.count += 3;
    backpack.totalValue += 30; // 3个药水，每个价值10金币
  } else {
    backpack.items.push({ name: '魔法药水', count: 3, value: 10 });
    backpack.totalValue += 30;
  }
};

const addWeapon = () => {
  backpack.items.push({ name: '附魔剑', count: 1, value: 200 });
  backpack.totalValue += 200;
};

const addHobby = () => {
  if (newHobby.value.trim()) {
    user.hobbies.push(newHobby.value.trim());
    newHobby.value = '';
  }
};

const removeHobby = (index: number) => {
  user.hobbies.splice(index, 1);
};
</script>

<style scoped>
.example-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.backpack {
  background: linear-gradient(135deg, #8B4513, #A0522D);
  border-radius: 10px;
  padding: 20px;
  color: white;
}

.items-list {
  margin-bottom: 20px;
}

.item {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-name {
  font-weight: bold;
}

.empty-message {
  text-align: center;
  color: #f0f0f0;
  font-style: italic;
  padding: 20px;
}

.backpack-stats {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.gold {
  color: #FFD700;
  font-weight: bold;
  font-size: 1.2em;
}

.highlight {
  color: #FFD700;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.action-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.action-button:nth-child(1) {
  background-color: #FFD700;
  color: #333;
}

.action-button.potion {
  background-color: #00FF00;
  color: #333;
}

.action-button.weapon {
  background-color: #FF6347;
  color: white;
}

.user-info {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.info-item {
  margin-bottom: 20px;
}

.info-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.info-item input[type="text"],
.info-item input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.hobbies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.hobby {
  background-color: #f0f4f8;
  padding: 8px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.remove-btn {
  background: none;
  border: none;
  color: #e74c3c;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-hobby {
  display: flex;
  gap: 10px;
}

.add-hobby input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.add-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.code-section {
  background-color: #f0f4f8;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #4285f4;
}

.code-section h3 {
  color: #333;
  margin-top: 0;
}

.code-section p {
  line-height: 1.6;
  color: #555;
}

.code-section code {
  background-color: #e8eaed;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: #d32f2f;
}
</style>